import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.PointerEventType
import androidx.compose.ui.input.pointer.onPointerEvent
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import toolCategories.ToolCategory
import toolCategories.toolCategories
import top.mcwebsite.devtoolbox.devtoolbox.generated.resources.Res
import top.mcwebsite.devtoolbox.devtoolbox.generated.resources.code

@Preview
@Composable
fun SideBar(
    modifier: Modifier = Modifier,
    selected: ToolCategory,
    onToolClick: (ToolCategory) -> Unit,
) {
    Column(
        modifier = modifier.defaultMinSize(minWidth = 50.dp)
            .fillMaxHeight()
            .background(MaterialTheme.colorScheme.surfaceContainer)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(vertical = 10.dp).padding(start = 20.dp)
        ) {
            Image(
                painter = painterResource(Res.drawable.code),
                contentDescription = "DevToolBox",
                modifier = Modifier.size(48.dp)
            )
            Text(
                text = "DevToolBox",
                fontWeight = FontWeight.Bold,
                fontSize = 20.sp,
                modifier = Modifier.padding(start = 10.dp)
            )
        }
        Divider()
        Spacer(Modifier.height(10.dp))
        toolCategories.forEach { toolCategory ->
            SideBarItem(
                toolCategory = toolCategory,
                selected = selected == toolCategory,
                modifier = Modifier
                    .padding(horizontal = 20.dp)
                    .clickable(role = null) {
                        onToolClick(toolCategory)
                    }

            )
        }
    }
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun SideBarItem(
    toolCategory: ToolCategory,
    selected: Boolean = false,
    modifier: Modifier = Modifier
) {
    println("selected = $selected")
    var showBackground by remember { mutableStateOf(selected) }
    if (showBackground != selected) {
        showBackground = selected
    }
    val backgroundModifier = if (showBackground) {
        Modifier.background(shape = RoundedCornerShape(5.dp), color = Color(0xFFE6EDF3))
    } else {
        Modifier
    }
    Box(modifier = modifier
        .then(backgroundModifier)
        .onPointerEvent(PointerEventType.Enter) {
            if (!selected) {
                showBackground = true
            }
        }
        .onPointerEvent(PointerEventType.Exit) {
            if (!selected) {
                showBackground = false
            }
        }
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(10.dp)
        ) {
            toolCategory.ToolCategoryIcon(Modifier.size(24.dp))
            Text(
                text = toolCategory.getName(),
                modifier = Modifier.padding(start = 10.dp)
            )
            Spacer(Modifier.weight(1.0f))
        }
    }
}